<template>
  <div
    class="business-page-container"
    v-loading="loading"
    element-loading-text="数据加载中..."
  >
    <codeless-page
      v-if="pageInfo.type === '普通' || pageInfo.type === '标签'"
      :pageInfo="pageInfo"
    />
    <visual-page
      v-else-if="pageInfo.type === '可视化' && pageInfo.layoutMode !== '大屏'"
      :pageInfo="pageInfo"
    />
    <dashboard-page
      v-else-if="pageInfo.type === '可视化'"
      :pageInfo="pageInfo"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, provide } from 'vue';
import CodelessPage from '@/codeless/view/page.vue';
import VisualPage from '@/visual/view/page.vue';
import DashboardPage from "@/dashboard/view/page.vue";
import { getPage } from '@/utils/codeless';

const hash = window.location.hash;
const path = hash.split("/");
const menuId = ref(path[2]);
const pageId = ref(path[3]);
const loading = ref(true);
const pageInfo = ref({});
provide('menuId', menuId);

onMounted(async() => {
  loading.value = true;
  pageInfo.value = await getPage(pageId.value);
  loading.value = false;
});
</script>

<style scoped>
.business-page-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>